<template>
 <div class="full-height bg-white page-content content">
   <collapse ref="collapse">
     <template v-slot:content>
       <yz-condition-filter
         v-model="params"
         @resetSearch="resetSearch"
         @onSubmit="onSubmit"
         style="margin-top: 4px;"
       >
         <select-tooltip
           v-model="params.state"
           isShowAll
           :options="$getEnum(Enums.SC_ORDER_STATUS)"
           msg="工单状态"/>
         <workshop-search v-model="params" ref="workShopSearch" :is-shift="false"/>
         <yz-input
           v-model.trim="params.taskId"
           class="q-mr-md"
           title="任务单号"
         />
         <yz-input
           v-model.trim="params.workOrderId"
           class="q-mr-md"
           title="工单号"
         />
         <yz-input
           v-model.trim="params.startTime"
           class="margin-r-20 margin-b-20"
           isTip
           clearable
           inputType="date"
           hint="选择时间范围"
           title="开始时间"
         />
         <yz-input
           v-model.trim="params.endTime"
           class="margin-r-20 margin-b-20"
           isTip
           clearable
           inputType="date"
           hint="选择时间范围"
           title="结束时间"
         />
         <yz-input
           v-model.trim="params.deviceThirdId"
           class="q-mr-md"
           title="MES设备ID"
         />
       </yz-condition-filter>
       <div class="form-inline bottom justify-between items-center" style="padding-bottom: 0">
         <export-btn
           :exportFun="exportFun"
           :exportParams="exportParams"
           :disable="!tableData.length"
           exportName="工单报表.xls"/>
       </div>
     </template>
   </collapse>
   <q-table :data="tableData"
            :columns="tableColumns"
            row-key="index"
            class="myTable scroll"
            style="padding-top: 20px"
            :pagination.sync="pagination"
            :hide-bottom="!!tableData.length"
            no-data-label="暂无数据"
            :loading="isTableLoading"
            color="primary">
     <template v-slot:body-cell-state="props">
       <q-td :props="props">
         <set-color :options="$getEnum(Enums.SC_ORDER_STATUS)" :colorType="props.row.state" />
       </q-td>
     </template>
     <template v-slot:body-cell-status="props">
       <q-td :props="props">
         <set-color :options="statusList" :colorType="props.row.status" />
       </q-td>
     </template>
   </q-table>
   <yz-pagination v-model="pagination" @onSearch="getList"/>
 </div>
</template>

<script>
import Collapse from 'src/components/collapse'
import { mapGetters } from 'vuex'
import thirdWorkOrder from '../../boot/statistics/third-work-order'
import _ from 'lodash'
import moment from 'moment'

export default {
  name: 'sc-order-report',
  components: {
    Collapse
  },
  computed: {
    ...mapGetters([
      'client', 'statusList'
    ])
  },
  data () {
    return {
      exportFun: thirdWorkOrder.getExport,
      isTableLoading: false,
      params: {
        startTime: [null, null],
        endTime: [null, null],
        location: {
          id: null,
          level: null,
          label: '',
          hash: ''
        },
        state: ['all'],
        devices: ['all'],
        taskId: '',
        workOrderId: '',
        deviceThirdId: ''
      },
      statusOptions: [
        {
          label: '全部',
          value: null,
          color: null
        }
      ],
      chartData: [],
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      exportParams: {},
      tableColumns: [
        { name: 'taskId', label: '任务单号', field: 'taskId', align: 'left' },
        { name: 'workOrderId', label: '工单号', field: 'workOrderId', align: 'left' },
        { name: 'state', label: '当前工单状态', field: 'state', align: 'left' },
        { name: 'startTime', label: '开始时间', field: 'startTime', align: 'left' },
        { name: 'endTime', label: '结束时间', field: 'endTime', align: 'left' },
        { name: 'number', label: '任务数量', field: 'number', align: 'left' },
        { name: 'checkInNumber', label: '完工数量', field: 'checkInNumber', align: 'left' },
        { name: 'deviceName', label: '加工设备', field: 'deviceName', align: 'left' },
        { name: 'status', label: '当前设备状态', field: 'status', align: 'left' },
        { name: 'deviceThirdId', label: 'MES设备ID', field: 'deviceThirdId', align: 'left' }
      ],
      tableData: []
    }
  },
  mounted () {
    this.getListInit()
  },
  methods: {
    getListInit () {
      this.$refs.workShopSearch.getWorkshops().then(() => {
        this.getList()
      })
    },
    getList () {
      const params = {
        schemaId: this.params.location.id,
        schemaLevel: this.params.location.level,
        deviceIds: this.params.devices[0] !== 'all' ? this.params.devices : [],
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }
      // if (!_.isNil(this.params.startTime[0]) && !_.isNil(this.params.startTime[1])) {
      //   if (moment(this.params.startTime[0]).diff(moment(this.params.startTime[1]), 'days') > 30) {
      //     this.$message.warning('日期范围最大不可超过30天')
      //   } else {
      //     params['startDateFrom'] = moment(this.params.startTime[0]).format('YYYY-MM-DD')
      //     params['startDateTo'] = moment(this.params.startTime[1]).add(1, 'd').format('YYYY-MM-DD')
      //   }
      // }
      this.params.state[0] !== 'all' && (params['state'] = this.params.state)
      !_.isNil(this.params.startTime[0]) && (params['startDateFrom'] = moment(this.params.startTime[0]).format('YYYY-MM-DD'))
      !_.isNil(this.params.startTime[1]) && (params['startDateTo'] = moment(this.params.startTime[1]).add(1, 'd').format('YYYY-MM-DD'))
      !_.isNil(this.params.endTime[0]) && (params['endDateFrom'] = moment(this.params.endTime[0]).format('YYYY-MM-DD'))
      !_.isNil(this.params.endTime[1]) && (params['endDateTo'] = moment(this.params.endTime[1]).add(1, 'd').format('YYYY-MM-DD'))

      !_.isEmpty(this.params.taskId) && (params['taskId'] = this.params.taskId)
      !_.isEmpty(this.params.workOrderId) && (params['workOrderId'] = this.params.workOrderId)
      !_.isEmpty(this.params.deviceThirdId) && (params['deviceThirdId'] = this.params.deviceThirdId)
      this.exportParams = _.cloneDeep(params)
      this.tableLoading = true
      thirdWorkOrder.getReportList(params).then(res => {
        res.list.forEach((item, index) => {
          item.indexId = (this.pagination.pageNum - 1) * this.pagination.pageSize + index + 1
          item.number = this.$utils.label(item.number, 0)
          item.checkInNumber = this.$utils.label(item.checkInNumber, 0)
          item.startTime = _.isNil(item.startTime) ? '--' : moment(item.startTime).format('YYYY-MM-DD HH:mm')
          item.endTime = _.isNil(item.endTime) ? '--' : moment(item.endTime).format('YYYY-MM-DD HH:mm')
        })
        this.pagination.rowsNumber = res.total
        this.tableData = res.list
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 重置
    resetSearch () {
      Object.assign(this.params, this.$options.data.call(this).params)
      this.$refs.workShopSearch.initData()
    },
    // 查询
    onSubmit () {
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
